<template>
  <el-dialog title="收费方案" :visible.sync="dialogVisible" :before-close="handleClose">
    <el-table ref="Table" v-loading="loading" :data="list" style="width: 100%" class="table-empty" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="计划名称" />
      <el-table-column prop="fullAmount" label="金额" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <Pagination class="mt-20" :total="pagination.total" :page-num="pagination.pageNum" :page-size="pagination.pageSize" @paginationFun="paginationFun" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitFun">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Basic/PaginationTwo'
import { getProductSolution } from '../api'
export default {
  components: {
    Pagination
  },
  data () {
    return {
      dialogVisible: false,
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 1
      },
      list: [],
      loading: false
    }
  },
  created () {

  },
  methods: {
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    mainFun () {
      this.dialogVisible = true
      this.getData()
    },
    getData () {
      this.loading = true
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize
      }
      getProductSolution(prams).then(res => {
        this.loading = false
        this.pagination.total = res.totalPages
        // res.content.map(item => {
        //   item.beginDate = dayjs(item.beginDate).format('YYYY/MM/DD')
        //   item.endDate = dayjs(item.endDate).format('YYYY/MM/DD')
        //   this.list.push(item)
        // })
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelectionChange (val) {
      console.log(val)
      if (val.length > 1) {
        this.$refs.Table.clearSelection()
        this.$refs.Table.toggleRowSelection(val.pop())
      }
      this.checkData = val[0]
    },
    submitFun () {
      this.$emit('getPlanData', this.checkData)
      this.dialogVisible = false
    },
    handleClose (done) {
      this.dialogVisible = false
    }
  }
}
</script>

<style>
</style>
